@transform-timer: 0.3s;

.transferring {
  position: absolute;
  top: 20px;
  right: 20px;
  bottom: 0;
  left: 20px;
  overflow: hidden;
}

// 路由容器
.transfer-route-container {
  position: relative;
  height: 100%;
  & > .ka-wrapper {
    height: 100%;
    & > .ka-content {
      height: 100%;
    }
  }
}
// 路由动画
.forward-enter {
  z-index: 2;
  transform: translateX(36px);
  opacity: 0;
  .transferring;
}
.forward-enter-active {
  transform: translateX(0);
  opacity: 1;
  transition: opacity @transform-timer, transform @transform-timer;
}
.forward-exit {
  z-index: 1;
  transform: translateX(0);
  opacity: 1;
  .transferring;
}
.forward-exit-active {
  transform: translateX(-36px);
  opacity: 0;
  transition: opacity @transform-timer, transform @transform-timer;
}

.back-enter {
  z-index: 1;
  transform: translateX(-36px);
  opacity: 0;
  .transferring;
}
.back-enter-active {
  transform: translateX(0);
  opacity: 1;
  transition: opacity @transform-timer, transform @transform-timer;
}
.back-exit {
  z-index: 2;
  transform: translateX(0);
  opacity: 1;
  .transferring;
}
.back-exit-active {
  transform: translateX(36px);
  opacity: 0;
  transition: opacity @transform-timer, transform @transform-timer;
}

.fade-enter {
  z-index: 2;
  opacity: 0;
  .transferring;
}
.fade-enter-active {
  opacity: 1;
  transition: opacity @transform-timer;
}
.fade-exit {
  z-index: 1;
  opacity: 1;
  .transferring;
}
.fade-exit-active {
  opacity: 0;
  transition: opacity @transform-timer;
}
